<template>
    <div class="main_self">
        <van-nav-bar title="个人中心" left-arrow @click-left='goback()' right-text="设置"   @click-right="onClickRight" class="header">
        </van-nav-bar>
        
        <main>
            <div class="img_main">
                <img
                    src="https://pics5.baidu.com/feed/a71ea8d3fd1f413458b42c6baa84afccd0c85e41.jpeg?token=7226f344ca42b88e79fa9b183b06957c&s=5AA492454E30258C1F244DD203006093" />
                <p @click="gologin">{{msg}}</p>
               
            </div>
            <ul>
                <li>
                    <van-icon name="refund-o" />
                    <span>代付款</span>
                </li>
                <li>
                    <van-icon name="shop-o" />
                    <span>代收货</span>
                </li>
                <li>
                    <van-icon name="thumb-circle-o" />
                    <span>待评价</span>
                </li>
                <li>
                    <van-icon name="label-o" />
                    <span>全部订单</span>
                </li>
            </ul>
            <div class="list">
                <div>
                    <p>地址管理</p>
                    <van-icon name="arrow" />
                </div>
                <div>
                    <p>我的收藏</p>
                    <van-icon name="arrow" />
                </div>
                <div>
                    <p>关于我们</p>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="main_img">
                <img src="../assets/logo.png">
            </div>
        </main>
        <FooterBarVue class="footer"></FooterBarVue>

    </div>
</template>

<script>
import FooterBarVue from '../components/FooterBar.vue';

export default {
    data(){
        return{
            msg:'请点击登录'
        }
    },
    components: { FooterBarVue },
    methods: {
        goback() {
            this.$router.back()
        }, gologin(){
            this.$router.push('/login')
        },
        // 设置
        onClickRight(){
            this.$router.push('setup')
        }
    },
    created(){
        if(localStorage.getItem('token')){
            if(localStorage.getItem('usernickname')){
                this.msg='欢迎来到'+localStorage.getItem('usernickname')+'的主页'
            }else{
                this.msg='欢迎来到'+localStorage.getItem('username')+'的主页'
            }

        }else{
            this.msg='请点击登录'
        }
    }
}
</script>

<style scoped>
.main_self {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 .625rem  ;
}

.header {
    height: 4rem;
}


main {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

main .img_main {
    display: flex;
    height: 6.25rem;
    align-items: center;
    background-color: #f6d2d2;
}

main .img_main img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    margin-right: 1.625rem;
}

main .img_main p {
    height: 5rem;
    line-height: 5rem;
}

ul {
    display: flex;
}

ul li {
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 5.4375rem;
    justify-content: center;

}

ul li .van-icon {
    font-size: 2.25rem;
}

ul li span {
    font-size: 1rem;
}

.list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3.5rem;
}

.main_img {
    flex: 1;
    width: 100%;
    background-color: #efefef;
    position: relative;
}

.main_img img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2rem
}
</style>